<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            margin: 0 auto;
            width: 100%;
            height: 100%
        }

        html,
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
    </style>

</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    
    <script>
        var CHUNK_COUNT = 19;
        var resources = {
            "text_echartsLinesMillions_bjRoads": "北京道路网络图",
            "text_echartsLinesMillions_bjRoads_subtext": "130万点数据绘制",
        };
        var echartsLayer = null;
        var option = null;
        var amap = null;
        var that = this;

        option = {
            animation: false,
            progressive: 20000,
            GLMap: {
                roam: true
            },
            title: {
                top: '10px',
                text: resources.text_echartsLinesMillions_bjRoads,
                subtext: resources.text_echartsLinesMillions_bjRoads_subtext,
                left: 'center',
                textStyle: {
                    color: '#DC143C'
                },
                subtextStyle: {
                    color: '#DC143C'
                }
            },
            coordinateSystem: 'GLMap',
            series: [{
                name: 'beijingRoads',
                type: 'lines',
                blendMode: 'lighter',
                coordinateSystem: 'GLMap',
                dimensions: ['value'],
                data: new Float64Array(),
                polyline: true,
                large: true,
                lineStyle: {
                    color: 'orange',
                    width: 1,
                    opacity: 0.3
                }
            }]
        };

        map.Factory.create('mapui', {
            style:style,
            center: [116.36, 40.0],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 9,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers']
        }, (o) => {
            amap = o;
            map.Factory.loadSpecialMap('echarts', () => {
                that.init(amap.pmap);
            })
        });


        function init(map) {
            echartsLayer = new EchartsLayer(map);
            fetchData(0);
            echartsLayer.chart.setOption(option);
        }

        function fetchData(idx) {
            if (idx > CHUNK_COUNT) {
                return;
            }
            var dataURL = "https://iclient.supermap.io/web/data/bigdata_beijingroads/data_" + idx + ".bin";
            var xhr = new XMLHttpRequest();
            xhr.open('GET', dataURL, true);
            xhr.responseType = 'arraybuffer';

            xhr.onload = function (e) {
                var rawData = new Float32Array(this.response);
                echartsLayer.chart.appendData({
                    seriesIndex: 0,
                    data: rawData
                });

                fetchData(idx + 1);
            };

            xhr.send();
        }



    </script>
</body>

</html>